<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="page/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <%response.setCharacterEncoding("utf-8"); %>
    <%request.setCharacterEncoding("utf-8"); %>
    <title>图片上传窗口</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="jquery/uploadify-v2.1.4/uploadify.css">
	<style type="text/css">
	  .upload{
	    border: 1px solid #ccc;
	    padding-top: 5px; 
	    display: inline ;
	    height: 32px; 
	    background-color: gray;
	    width: 100px; 
	    cursor: pointer
	  }
	  body{
	    background-color: #ffffff
	  }
	</style>
  </head>
  
  <body>
       <table>
         <tr>
		  <td>
			<div id="fileQueue" style="width: 385px; height: 280px ; border: 1px solid #ccc;margin-bottom: 5px;overflow-y: scroll"></div>
			<table>
			  <tr>
			    <td  width="100px">
			      <div>
				      <input type="file" name="uploadify" id="uploadify" />
			      </div>
			    </td>
			    <td>
			      <div>
					  <div align=cener class="upload" onmouseover="this.style.border='0px solid #ccc'" onmouseout="this.style.border='1px solid #ccc'"  onclick="$('#uploadify').uploadifyUpload()"><span style="margin-left: 20px;margin-top: 10px"><font color=white><b>上传图片</b></font></span></div> 
					  <div align=cener class="upload" onmouseover="this.style.border='0px solid #ccc'" onmouseout="this.style.border='1px solid #ccc'" onclick="$('#uploadify').uploadifyClearQueue()"><span style="margin-left: 20px;margin-top: 10px"><font color=white><b>取消上传</b></font></span></div>
				  </div>
			    </td>
			  </tr>
			</table>
		  </td>
         </tr>
       </table>

  </body>
  <script type="text/javascript" src="jquery/uploadify-v2.1.4/swfobject.js"></script>
  <script type="text/javascript" src="jquery/uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
  <script type="text/javascript">
    var successFlag = true;
    function upload(){
      $('#uploadify').uploadify({
		        'uploader': 'jquery/uploadify-v2.1.4/uploadify.swf',
                'script': 'saveFile.action',
                'cancelImg': 'jquery/uploadify-v2.1.4/cancel.png',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true,
                'method':'POST',
                'fileDataName': 'file',
                'scriptData':{'test':'test'},//GET方式才可生效
                'fileExt' :'*.jpg;*.gif;*.png', //控制可上传文件的扩展名
                'fileDesc': 'jpg、gif、png文件', //控制可上传文件的扩展名描述，两者需要同时使用  
                'width':120,//"浏览"按钮宽度
                'folder':'/album',
                'buttonText':'select files',
                'onComplete':function(event,ID,fileObj,response,data){
                    if(response == 'n'){
                       successFlag = false;
                       alert('系统发生错误，请与管理员联系!');
                    }
                },
                'onAllComplete':function(event,ID,fileObj,response,data){
                      if(successFlag){
	                      alert("图片上传成功");
                      }
                      successFlag = true;
                      //window.dialogArguments.location.href = 'backShowPic.action';
                      window.close();
                 },
                'onError': function(event, queueID, fileObj){
                  alert("图片:" + fileObj.name + " 上传失败");  
                }
                
		  });
   }
   
   $(document).ready(function(){
      upload();
   });
  </script>
</html>
